import Icon from "../icon";
import styles from './index.module.scss'
import { ReactNode } from "react";
import { useHistory } from "react-router";

type props = {
    left?: ReactNode
    right?: ReactNode
    children?: ReactNode
    onBack?: () => void
}
export default function NavBar({ left, right, children, onBack }: props) {
    const history = useHistory()
    // 左侧点击分两种情况
    const leftClick = () => {
        if (onBack) {
            // 情况1：如果用户传入事件处理函数，就调用用户的事件处理
            onBack()
        } else {
            // 情况2：如果用户没有传入，执行默认的返回上一页
            history.go(-1)
        }
    }
    return (
        <div className={styles.root}>
            <div className="main">
                {/* 后退按钮 */}
                <div className="left" onClick={leftClick}>
                    {left ? left : <Icon type="iconfanhui" />}
                </div>
                {/* 居中标题 */}
                <div className="title">{children}</div>
                {/* 右侧内容 */}
                <div className="right">{right}</div>
            </div>
        </div>
    )
}